<%--
  Created by IntelliJ IDEA.
  User: huimao
  Date: 2020/6/17
  Time: 20:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    ${sessionScope.admin}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" id="nav_menu" lay-filter="nav_menu">
             <%--   <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>--%>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <%--选项卡--%>
            <div class="layui-tab layui-tab-brief layui-tab-card" lay-allowClose="true" lay-filter="myTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">欢迎页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">欢迎使用..xxxx</div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>

    /*给二级标题绑定点击事件开始*/
    function addTab(menuName,menuUrl,menuId){
        layui.use('element', function(){
            var element = layui.element;
            if($("[lay-id="+menuId+"]").size()!=1){
                //增加选项卡
                element.tabAdd('myTab',{
                    //二级菜单的名字
                    title:menuName,
                    //二级菜单的地址
                    content: '<iframe src="${pageContext.request.contextPath}/'+menuUrl+'" width="100%" height="100%"></iframe>',
                    //二级菜单id
                    id:menuId
                });
            }

            //切换到指定选项卡
            element.tabChange('myTab',menuId);
        });
    }
    /*给二级标题绑定点击事件结束*/


    /*左边菜单栏动态展示开始*/
    $(function(){
        //1.ajax获取后台数据
        $.ajax({
            url:"${pageContext.request.contextPath}/menu/selectAllMenu",
            success:function(data){
                //2.遍历一级菜单数据 拼接一级菜单的html
                var html="";
                //each 参数1 被遍历的数据 参数2 匿名函数（被遍历的元素下标，被遍历的元素）
                $.each(data,function (index1,menu1) {
                    //拼接一级菜单前标签
                    html+= "<li class=\"layui-nav-item \"><a class=\"\" href=\"javascript:;\">";
                    //拼接一级菜单名字
                    html+=menu1.menuName+"</a>";

                    //3.拼接二级菜单
                    $.each(menu1.child,function(index2,menu2){
                        //拼接二级菜单前标签
                        html += "<dl class=\"layui-nav-child\"><dd><a href=\"javascript:;\" " +
                            "onclick='addTab(\"" + menu2.menuName+ "\",\""+ menu2.menuUrl+"\","+ menu2.menuId+ ")'>";
                        //拼接二级菜单名字
                        html += menu2.menuName;
                        //拼接二级菜单后标签
                        html += "</a></dd></dl>";
                    })

                    //拼接一级菜单后标签
                    html+="</li>"
                });
                //将拼接好的目录栏赋值给目录标签
                $("#nav_menu").html(html);

                //更新渲染
                layui.use('element',function () {
                    var element=layui.element;
                    element.render('nav','nav_menu');
                })
            }
        })

    })
    /*左边菜单栏动态展示结束*/




    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>
